<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@page import="cn.edu.zjut.chopper.message.RemoteInterface"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
		<!-- 1. Add these JavaScript inclusions in the head of your page --> 
		<script type="text/javascript" src="/chopper/js/jquery-1.5.2.js"></script> 
		<script type="text/javascript" src="/chopper/js/Higncharts-2.1.4/highcharts.js"></script> 
		
		<!-- 1b) Optional: the exporting module --> 
		<script type="text/javascript" src="/chopper/js/Higncharts-2.1.4//modules/exporting.js"></script> 
		
		<script type="text/javascript"> 
		var reponseTimeChart;
		$(document).ready(function() {
		reponseTimeChart = new Highcharts.Chart({
			chart: {
				renderTo: 'reponse_time',
				defaultSeriesType: 'line'
			},
			title: {
				text: 'Reponse Time'
			},
			subtitle: {
				text: ''
			},
			xAxis: {
				labels: {
					formatter: function() {
						var date = new Date(this.value);
						return date.getHours()+':'+date.getMinutes()+':'+date.getSeconds(); 
					}
				},
			},
			yAxis: {
				title: {
					text: 'Reponse Time'
				},
				labels: {
					formatter: function() {
						return this.value+' ms';
					}
				},
				max:100,
				min:0
			},
			tooltip: {
				enabled: false,
				formatter: function() {
					return this.y +' ms';
				}
			},
			plotOptions: {
				line: {
					dataLabels: {
						enabled: true
					},
					enableMouseTracking: false
				}
			},
			series: [{
				name: 'Reponse Time',
				data: []
			}]
		});
	});
	
	</script>
<title>Remote Interface Monitor</title>
</head>
<body style="background-color: #AFEEEE; text-align: center;">
<jsp:include page="head.html"/>

<table width="800" align="center" >
	<tr style="background-color: #969696">
		<td><table align="center"><tr><td style="font-size:20pt;">Remote Interface Monitor</td></tr></table></td>
	</tr>
<% 
	RemoteInterface ri = (RemoteInterface)request.getAttribute("remote_interface"); 
	out.println("<tr><td><table width=\"100%\">");
	out.println("<tr  style=\"background-color:#90EE90;\"><td width=\"25%\" style=\"font-weight:bold\">Registry Key:</td><td id=\"ri_name\" width=\"25%\">"+ri.getName()+"</td><td width=\"25%\" style=\"font-weight:bold \">Version:</td><td id=\"ri_version\" width=\"25%\">"+ri.getVersion()+"</td></tr>");
	out.println("<tr  style=\"background-color:#90EE90;\"><td width=\"25%\" style=\"font-weight:bold\">Class Name:</td><td width=\"25%\">"+ri.getInterfaceClassName()+"</td><td width=\"25%\" style=\"font-weight:bold \">Invoke Count:</td><td width=\"25%\">"+ri.getCount()+"</td></tr>");
	out.println("<tr  style=\"background-color:#90EE90;\"><td width=\"25%\" style=\"font-weight:bold\">Url:</td><td id=\"ri_url\" width=\"75%\" colspan=\"3\">"+ri.getUrl()+"</td></tr>");
	out.println("<tr  style=\"background-color:#90EE90;\"><td width=\"25%\" style=\"font-weight:bold\">Note:</td><td width=\"75%\" colspan=\"3\">"+ri.getNote()+"</td></tr>");
	out.println("</table></td></tr>");
%>
</table>	
	
	<div id="reponse_time"  style="width: 800px; height: 400px; margin: 0 auto"></div>
	<script type="text/javascript"> 
			var responseTimeData = new Array();
			var name = $("#ri_name").text();
			var version = $("#ri_version").text();
			var url = $("#ri_url").text();
			function updateData(name,version,url){
				$.ajax({  
                    url:'/chopper/RemoteInterfaceMonitor',  
                    dataType:'json', 
                    data:{Name:name,Version:version,Url:url},
                    error:function(){  
                        alert("error occured in getting data from server!");  
                    },  
                    success:function(data){  
						var responseTimePair = new Array();
                            $.each(data,function(key,value){  
								if(key == 'responseTime'){
									responseTimePair[1] = value;
								}else if(key == 'statisticsTime'){
									responseTimePair[0] = value.time;
								}
                            });  
                            if(responseTimeData.length < 10){
								responseTimeData[responseTimeData.length] = responseTimePair;
							}else{
								for(var i=0;i<responseTimeData.length;i++){
									if(i == responseTimeData.length -1){
										responseTimeData[i] = responseTimePair;
									}else{
										responseTimeData[i] = responseTimeData[i+1];
									}
								}
							}
                        reponseTimeChart.series[0].setData(responseTimeData);
                    }  
                }); 			
			};
			updateData(name,version,url);
			setInterval(function(){
				updateData(name,version,url);
			}, 5000);
			
		</script> 
		
<jsp:include page="foot.html"/>
</body>
</html>